<template>
  <div>
    <top :active="active"></top>
    <div class="top" style="margin-top: 15px">
      <el-input
        placeholder="请输入内容"
        v-model="input3"
        class="input-with-select"
      >
        <el-select
          v-model="select"
          slot="prepend"
          placeholder="请选择"
          @change="change"
        >
          <el-option label="品牌名称" value="1"></el-option>
          <el-option label="商品类型" value="2"></el-option>
          <el-option label="商品名称" value="3"></el-option>
        </el-select>
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="search"
        ></el-button>
      </el-input>
    </div>

    <div class="commodity-list">
      <div
        class="commodity"
        v-for="item in list"
        :key="item.id"
        @click="details(item)"
      >
        <img class="img" :src="item.imgs" alt="" />
        <div
          style="
            display: flex;
            justify-content: space-around;
            margin-bottom: 10px;
          "
        >
          <span>{{ item.brand }}</span>
          <span>{{ item.shopnames }}</span>
          <span>{{ item.types }}</span>
        </div>
        <div
          style="
            font-size: 20px;
            color: red;
            margin-left: 20px;
            margin-bottom: 10px;
          "
        >
          ¥:{{ item.price }}
        </div>
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
          "
        >
          <span style="margin-left: 20px">{{ item.company }}</span>
          <span style="margin-right: 20px">销量:{{ item.counts }}</span>
        </div>
      </div>
    </div>
    <div style="display: flex; justify-content: center">
      <el-pagination
        @current-change="handleCurrentChange"
        :page-size="10"
        layout="total, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getShopList, getAgeSearch } from "@/api/login";
import top from "@/components/top/index.vue";
export default {
  name: "KingsIndex",
  components: { top },
  data() {
    return {
      input3: "",
      select: "",
      list: [],
      active: "1",
      parmas: {
        pageNo: 1,
        pageSize: 10,
        brand: "",
        types: "",
        shopnames: "",
      },
      total: 0,
    };
  },
  created() {
    this.getShopList();
  },

  mounted() {},

  methods: {
    details(item) {
      this.$router.push({
        path: "/shopDetails",
        query: { item: JSON.stringify(item) },
      });
    },
    getShopList() {
      if (!localStorage.getItem("age")) {
        getShopList(this.parmas).then((res) => {
          console.log(res);
          if (res.code == 200) {
            this.list = res.data.record || [];
            this.total = res.data.total || 0;
          }
        });
      } else {
        getAgeSearch({ ...this.parmas, age: localStorage.getItem("age") }).then(
          (res) => {
            console.log(res);
            if (res.code == 200) {
              this.list = res.data.data || [];
              this.total = res.data.total || 0;
            }
          }
        );
      }
    },

    handleCurrentChange(val) {
      this.parmas.pageNo = val;
      this.parmas.brand = "";
      this.parmas.types = "";
      this.parmas.shopnames = "";
      this.getShopList();
    },
    change(e) {
      this.parmas = {
        pageNo: 1,
        pageSize: 10,
        brand: "",
        types: "",
        shopnames: "",
      };
    },
    search() {
      if (this.select == 1) {
        this.parmas.brand = this.input3;
      } else if (this.select == 2) {
        this.parmas.types = this.input3;
      } else {
        this.parmas.shopnames = this.input3;
      }
      this.getShopList();
      // this.input3 = "";
    },
  },
};
</script>

<style lang="scss" scoped>
.top {
  width: 50vw;
  margin: 0 auto;
}

::v-deep .el-input-group__prepend {
  width: 120px;
}
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}

.commodity {
  width: 23%;
  height: 18vw;
  // margin-left: 2vw;
  border: 1px solid #ccc;
  margin-bottom: 20px;
  margin-right: 2%;
  // margin-right: 2vw;

  // display: inline-block;
  // float: left;
}
.commodity:nth-child(4n) {
  margin-left: 0;
}

.commodity-list {
  width: 90%;
  margin: 0 auto;
  // display: flex;
  display: flex;
  flex-wrap: wrap;
  // justify-content: space-evenly;
  margin-top: 20px;
}

::v-deep .el-pagination {
  //position: fixed;
  //bottom: 0;
  //left: 50%;
  //transform: translateX(-50%);
  // padding: 20px;
}

.img {
  width: 100%;
  height: 12vw;
}
</style>
